<template>
    <el-row :gutter="40" class="panel-group">
        <el-col v-for="i in list" :key="i.id" :xs="12" :sm="12" :lg="6" >
            <panel-group-item v-bind="i"  />
        </el-col>
    </el-row>
</template>

<script>
import PanelGroupItem from './PanelGroupItem'
import cssVar from '@/style/var.scss'
import { getFourBlock } from '@/api'

export default {
    name: 'panelGroup',

    components: { PanelGroupItem },

    data() {
        return {
            loading: false,
            list: [
                {
                    id: 'online',
                    icon: 'svg-user',
                    color: cssVar.info,
                    value: 1,
                    text: '在线用户'
                },
                {
                    id: 'purchase',
                    icon: 'svg-shopping',
                    color: cssVar.primary,
                    value: 0,
                    text: '总共采购额'
                },
                {
                    id: 'sell',
                    icon: 'svg-sell',
                    color: cssVar.warning,
                    value: 0,
                    text: '总共销售额'
                },
                {
                    id: 'profit',
                    icon: 'svg-money',
                    color: cssVar.success,
                    value: 0,
                    text: '总共毛利润'
                },
            ]
        }
    },

    methods: {
        init() {
            if (this.loading) return
            this.loading = true
            getFourBlock
                .request()
                .then(({ data }) => {
                    this.list[1].value = data.data.purchase
                    this.list[2].value = data.data.sell
                    this.list[3].value = data.data.profit
                })
                .finally(() => this.loading = false)
        },

    },

    mounted() {
        this.init()
    }
}
</script>

<style>
.panel-group>.el-col {
    margin-bottom: 32px;
}
</style>
